<template>
    <div class="boxes">
        <div  class="innovation-head">
            <div class="innovation-text">航司查询</div>
            <input class="innovation-input" type="text" v-model="selectData" @click.stop="openShow" maxlength="20"/>
            <button class="innovation-qbuttom" @click="queryData"></button>
        </div>
        <depQuery :select="selectData" v-on:message="recieveMessage" v-if="opens"></depQuery>
        <div class="innovation-body" :class="{innovationMin:!shos}" id="airLineA" v-if="boatData!=''">
            <div class="innovation-box" id="airLineB">
                <div class="innovation-block">
                    <div class="innovation-minute innovation-minuteO">
                        <h4 class="innovation-blockT">基本信息</h4>
                        <ul class="innovation-block">
                            <li>
                                <div class="inn-f">航司名称：</div>
                                <div class="inn-fN">{{boatData.airln_cd}}</div>
                                <div class="inn-l">IATA代码：</div>
                                <div class="inn-fN">{{boatData.iata}}</div>
                            </li>
                            <li>
                                <div class="inn-f">ICAO代码：</div>
                                <div class="inn-fN">{{boatData.icao}}</div>
                                <div class="inn-l">总部位置：</div>
                                <div class="inn-fN">{{boatData.headquartersLocation}}</div>
                            </li>
                        </ul>
                    </div>
                    <div class="innovation-details nice-btn-dBlue" @click="queryMore" v-show="!shos">查看详情</div>
                    <div class="innovation-minute">
                        <ul class="innovation-block">
                            <li>
                                <div class="inn-f">成立时间：</div>
                                <div class="inn-fN inn-fNs">{{boatData.establishTime!==""?boatData.establishTime:"-"}}</div>
                            </li>
                            <li>
                                <div class="inn-f">所属航系：</div>
                                <div class="inn-fN">{{boatData.systemAirpot!==""?boatData.systemAirpot:"-"}}</div>
                            </li>
                            <li>
                                <div class="inn-f">航空联盟：</div>
                                <div class="inn-fN">{{boatData.airlineAlliance!==""?boatData.airlineAlliance:"-"}}</div>
                            </li>
                            <li>
                                <div class="inn-f">通航国家：</div>
                                <div style="margin-left: 40px">
                                        <span v-for="(key,index) in (boatData.shippingCountry.split('、'))"
                                              style=" white-space: nowrap">
                                            <span v-if="index!=0">&nbsp;&nbsp;</span>
                                            <br v-if="index%10==0&&index!=0" />
                                            {{ key }}
                                        </span>
                                </div>
                            </li>
                            <li>
                                <div class="inn-f">通航机场：</div>
                                <div style="margin-left: 40px">
                                    <span v-for="(key,index) in (boatData.navigationAirport.split(','))"
                                          style=" white-space: nowrap">
                                        <span v-if="index!=0">&nbsp;&nbsp;</span>
                                        <br v-if="index%14==0&&index!=0" />
                                        {{ key }}
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <scrollBar3 :das="scrollNode" :switched="shos" v-if="shos"></scrollBar3>
        </div>
    </div>
</template>
<script>
    import scrollBar from '../component/scrollBarUltimate.vue';
    import depQuery from '../template/depSearch.vue'
    export default {
        data () {
            return {
                scrollNode:{
                    parent:"airLineA",
                    child:"airLineB",
                    courseN:"course3",
                    sliderN:"slider3",
                    speed:60
                },
                shos:false,
                qShow:1,
                selectData:"",
                selectCode:"",
                opens:0,
                boatData:""
            }
        },
        props:['close'],
        watch:{
            close:function () {
                this.opens=0;
            }
        },
        computed:{

        },
        methods:{
            recieveMessage: function (data) {
                this.selectData=data.name;
                this.selectCode=data.iT;
                this.opens=0;
            },
            queryMore:function () {
                this.shos=true;
            },
            openShow:function () {
                this.opens=1;
            },
            queryData:function (val) {
                if(this.selectData!=""){
                    if(this.selectCode!=""){
                        $.ajax({
                            type:'get',
                            url : 'restful/getOurBoatDetailInfoByCode',
                            data:{
                                code:this.selectCode,
                                airlineName:this.selectData
                            },
                            dataType : 'jsonp',
                            success:(data)=>{
                                this.boatData=data.success.ourBoatDetailInfo;
                            },
                        })
                    }else {
                        alert("请在输入框中输入航司,并且在选择栏栏中选择")
                    }
                }else {
                    alert("请在输入框中输入航司")
                }

            }
        },
        mounted(){

        },
        components:{
            scrollBar3:scrollBar,
            depQuery:depQuery
        }
    }
</script>
<style scoped>
    .inn-fNs{
        width: 716px !important;
    }
    .innovation-box{
        height: auto !important;
    }
    .innovation-minuteO{
        margin-top: 100px;
    }
    .innovationMin{
        height: 320px !important;
    }
</style>